<div class="col-md-3">
  <div ng-include="'views/mybatis/templates/sidebar.html'"></div>
</div>
<div class="col-md-9" ng-init="vm.init()">
  <h3 class="page-header">Parameter Matcher</h3>
  <form name="form" class="form-check" ng-submit="vm.matchParameters(form.$valid)" novalidate>
    <div class="form-group">
      <label class="control-label">Prepared SQL</label>
      <textarea class="form-control" rows="10" name="preparedSql" ng-model="vm.preparedSql" autofocus required
            placeholder="SELECT * FROM USER WHERE USER_ID = ?"></textarea>
      <p class="alert alert-danger" ng-show="form.$submitted && form.preparedSql.$error.required">
        <i class="glyphicon glyphicon-info-sign"></i> Prepared SQL is required</p>
    </div>
    <div class="form-group">
      <label class="control-label">Parameters</label>
      <textarea class="form-control" rows="5" name="parameters" ng-model="vm.parameters" required
            placeholder="100(Integer)"></textarea>
      <p class="alert alert-danger" ng-show="form.$submitted && form.parameters.$error.required">
        <i class="glyphicon glyphicon-info-sign"></i> Parameter(s) is required</p>
    </div>
    <button type="submit" class="btn btn-primary">Match SQL Parameters</button>
    <button id="copy" type="button" class="btn btn-success" data-clipboard-action="copy"
        data-clipboard-target="#code">Copy Matched SQL</button>
    <button type="button" class="btn btn-danger" ng-click="vm.clearAll()">Clear All</button>
  </form>
  <br>
  <div ng-show="vm.matchedSql != ''">
    <label>Matched SQL</label>
    <pre id="code" class="code">{{vm.matchedSql}}</pre>
  </div>
</div>
